웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
검색엔진 최적화 중 가장 중요한 부분은 무엇일까요? 생각해보면 여러가지가 있습니다. 그 중에서 가장 먼저 떠오르는 것은 사이트맵(Sitemap) 그리고 메타 태그 정보(Meta)입니다.
# SEO를 위한 메타 태그 정보 알아보기
이 번에는 검색엔진 최적화를 위해 반드시 필요한 메타 태그의 설정과 정보에 대하여 알아봅니다. 참고로 워드프레스의 경우 SEO 플러그인을 사용해서 자동으로 생성되는 경우가 많습니다. 그 중에서 Yoast SEO는 매우 잘 알려진 플러그인 중 하나지요.
이런 플러그인의 도움없이 직접 SEO를 위해 메타 데이터를 추가하려면 어떻게 할까요? 아래에서 필요한 코드를 만들고 직접 html의 head 영역에 추가하도록 합니다.
! 메타 태그는 <head> 엘리먼트 영역에 추가할 것
meta 태그 및 관련 요소들은 모두 head 안에 추가하도록 합니다. 그럼 어떤 메타 데이터를 생성하고 추가해야 할까요?
먼저 필요한 메타 정보는 아래와 같습니다.
description // 페이지의 간략한 설명
image // 관련 이미지, 대표 이미지
keywords // 관련 키워드를 등록
! 메타 태그 예제, 만들기
이제 위의 중요한 메타 요소를 실제 웹에 추가하기 위해서 아래와 같이 예제를 만들어 보았습니다. 아래의 코드를 봐주세요.
<title>웹페이지 제목</title>
<meta name="description" content="여기는 땡땡 웹페이지 입니다." />
<link rel="canonical" href="https://webisfree.com" />
<meta name="keywords" content="블로그, 커뮤니티, 웹개발" />
<meta name="description" content="여기는 땡땡 웹페이지 입니다." />
<link rel="canonical" href="https://webisfree.com" />
<meta name="keywords" content="블로그, 커뮤니티, 웹개발" />
꼭 필요한 정보는 위와 같습니다. 바로 제목과, 내용과 링크 정보입니다. 위 meta 정보만 보면 뭔가 허전하고 빠져있는 생각이 드시나요? 바로 OpenGraph 및 twitter 정보가 그것입니다.
공유하기 및 링크를 위해서 OpenGraph의 정보는 특히 많이 사용됩니다. 그런 목적에서 og(Open Graph)의 정보는 꼭 추가해 주는 것이 좋습니다. 이때 title이나 description은 위의 정보와 동일하면 되며 다르게 만들 필요는 없습니다.
참고로 og, twitter 메타는 이미지, 링크, 타입 등등 추가적인 설정이 있으니 알아두세요.
@ 대표 이미지 사용
여기서는 대표 이미지를 설정할 수 있습니다. OpenGraph, twitter 메타 정보 추가시 꼭 잊지 말아야 합니다.
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="웹페이지 제목" />
<meta property="og:description" content="여기는 땡땡 웹페이지 입니다." />
<meta property="og:url" content="https://webisfree.com" />
<meta property="og:image" content="대표 이미지 주소를 추가" />
<meta property="og:title" content="웹페이지 제목" />
<meta property="og:description" content="여기는 땡땡 웹페이지 입니다." />
<meta property="og:url" content="https://webisfree.com" />
<meta property="og:image" content="대표 이미지 주소를 추가" />
<!-- Twitter Meta -->
<meta name="twitter:card" content="summary, summary_large_image, app, player 중 하나를 선택하여 입력" />
<meta name="twitter:site" content="https://webisfree.com" />
<meta name="twitter:title" content="웹페이지 제목" />
<meta name="twitter:description" content="여기는 땡땡 웹페이지 입니다." />
<meta name="twitter:creator" content="카드에 보여줄 Creator 이름" />
<meta name="twitter:image" content="대표 이미지 주소를 추가" />
<meta name="twitter:site" content="https://webisfree.com" />
<meta name="twitter:title" content="웹페이지 제목" />
<meta name="twitter:description" content="여기는 땡땡 웹페이지 입니다." />
<meta name="twitter:creator" content="카드에 보여줄 Creator 이름" />
<meta name="twitter:image" content="대표 이미지 주소를 추가" />
여기까지 Open Graph와 twitter 정보까지 알아보았습니다.
! 정리하기
이상으로 메타 태그 정보 설정에 대하여 알아봤습니다. 메타 태그는 브라우저에게 정보를 전달하지만 검색엔진의 크롤러에게 필요한 데이터를 전달하기 위해서 필요합니다. 방문자 유입에 결정적인 역할을 하므로 꼭 정확한 정보를 입력해야만 하며 사이트맵과 같이 SEO에서 가장 중요한 요소이므로 반드시 알아두어야만 하겠습니다.아래의 글도 찾고 계시지 않나요?
